<template>
  <el-container>
    <el-header>
      <div class="header">
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-menu-item index="/home/index">首页</el-menu-item>
          <el-menu-item index="/home/hot">沸点</el-menu-item>
          <el-menu-item index="/home/info">资讯</el-menu-item>
        </el-menu>
        <div>
          <el-button
            type="primary"
            @click="$router.push('/login')"
            v-if="!user.isLogin"
            >登录</el-button
          >
          <!-- <el-button type="primary" v-else>{{ user.username }}</el-button> -->
          <el-dropdown v-else @command="handleCommand">
            <el-button type="primary">
              {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>我的资料</el-dropdown-item>
                <el-dropdown-item>我的设置</el-dropdown-item>
                <el-dropdown-item>我的收藏</el-dropdown-item>
                <el-dropdown-item @click="quit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
  <!-- 顶部 -->
</template>

<script>
import { computed, ref } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const activeIndex = ref("1");
    const store = useStore();
    const user = computed(() => store.state.user);
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath);
    };
    const handleCommand = (redi) => {
      console.log(redi);
    }
    return {
      activeIndex,
      handleSelect,
      user,
      quit: () => store.commit('QUIT'),
      handleCommand
    };
  }
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  height: 62px;
  justify-content: space-between;
  padding: 0px 10px;
  align-items: center;
  background: #545c64;
  position: fixed;
  width: 90%;
  top: 0;
  z-index: 999;
}

.el-main {
  width: 1000px;
  margin: auto;
}
</style>